<template>
  <!--vue3中允许有多个节点-->
  <div class="home">
    {{name.value.age}}
  </div>
  <div>{{a}}</div>
  <button @click="changeA">点击改变a</button>
</template>

<script>
// vue3中最大的一个变动就是 vue3提供了组合api setup
// setup 在 beforeCreate 之前执行 
import { useStore } from 'vuex'
import { ref, computed } from 'vue'
export default {
  name: 'Home',
  // beforeCreate() {
  //   console.log('beforeCreate');
  // },
  // data() {
  //   return {
  //     num: 123
  //   }
  // },
  setup(props) {
    // console.log('setup')
    // ref是用来声明一个具有响应式的基本数据类型的方法
    // js的基本数据类型有 string number boolean null undefined symbol
    // 引用数据类型 object array
    // console.log(this); setup中的this不是组件实例 所以在setup中不能使用this
    let a = ref('123') 
    // console.log(a);
    function  changeA() {
      a.value = "德玛西亚"
    }

    // 在vue3中需要使用计算属性来获取vuex中的数据 并且setup中不能使用vuex的辅助函数
    let store = useStore()
    
    return {
      a,
      changeA,
      name: computed(() => store.state.name)
    }
  },
  // created() {
  //   console.log(this.$store.state.name);
  // },
}
</script>
